<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞翔的小球</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#ball{
			width:160px;
			height:160px;
			background:blue;
			border-radius:50%;
			position:absolute;
			/*left:23px;*/
			/*top:0px;*/
			transition:background-color 0.3s linear;
		}
	</style>
</head>
<body>
	<div id="ball"></div>
</body>
<script>
	// 获取元素
	var ball = document.getElementById('ball');

	// 定义元素水平移动的步径
	var stepX = 3;	
	// 垂直方向移动步径
	var stepY = 3;		

	// 设置定时器
	setInterval(function(){
		// 当前元素的left值
		var l = ball.offsetLeft;
		var t = ball.offsetTop;

		// 新的left值
		var newLeft = l + stepX;
		var newTop = t + stepY;

		// 判断水平方向偏移最大值
		var maxLeft = document.documentElement.clientWidth - ball.offsetWidth - stepX;
		if(newLeft>=maxLeft){
			// 小球反向运动
			stepX *= -1;

			// 小球变背景颜色
			changeBg(ball);
		}

		// 水平方向最小值
		if(newLeft<=0){
			stepX *= -1;

			// 小球变背景颜色
			changeBg(ball);
		}

		// 判断垂直方向的临界点
		var maxTop = document.documentElement.clientHeight - ball.offsetHeight - stepY;
		if(newTop>=maxTop){
			// 反向
			stepY *= -1;

			// 小球变背景颜色
			changeBg(ball);
		}
		if(newTop<=0){
			stepY *= -1;

			// 小球变背景颜色
			changeBg(ball);
		}

		// 设置元素的left值
		ball.style.left = newLeft + 'px';
		ball.style.top = newTop + 'px';
	},20);

	// 定义获取m,n之间随机整数的函数
	function rand(m,n){
		return Math.floor(Math.random()*(n-m+1))+m;
	}

	// 定义改变元素背景颜色的函数
	function changeBg(obj){
		obj.style.background = 'rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')';
	}

</script>
</html>